import React, {useCallback} from 'react';
import {View, Text, TouchableHighlight} from 'react-native';
import Colors from '../../utils/Colors';
import PatIcon from '../base/PatIcon';
import {useNavigation} from '@react-navigation/native';
import style from './CateFilterTop.style';
import {useTranslation} from 'react-i18next';

const CateFilterSearch = ({isTop}) => {
  const {t} = useTranslation();
  const count = 11;
  const navigation = useNavigation();

  const goBack = useCallback(() => {
    console.log('goBack');
    navigation.goBack();
  }, [navigation]);
  const goCart = useCallback(() => {
    console.log('goBack');
    navigation.goBack();
  }, [navigation]);
  const goSearch = useCallback(() => {
    console.log('去搜索页');
    navigation.navigate('search-root', {type: 'categroy'});
  }, [navigation]);
  return (
    <View style={style.searchTop}>
      <TouchableHighlight
        activeOpacity={1}
        underlayColor={Colors.white}
        onPress={goBack}>
        <View style={style.arrow}>
          <PatIcon name="arrow-left" size={18} color={Colors.patFontGray} />
        </View>
      </TouchableHighlight>
      <TouchableHighlight
        activeOpacity={1}
        underlayColor={Colors.white}
        onPress={goSearch}>
        <View style={style.searchBox}>
          <PatIcon name="search2" size={14} color={Colors.patFontGray2} />
          <Text style={style.search}>{t('search.search')}</Text>
        </View>
      </TouchableHighlight>
      <TouchableHighlight
        activeOpacity={1}
        underlayColor={Colors.white}
        onPress={goCart}>
        <View style={style.cart}>
          <PatIcon name="shopping-bag" size={23} color={Colors.patFontGray} />
          {count > 0 ? <Text style={style.count}>{count}</Text> : null}
        </View>
      </TouchableHighlight>
    </View>
  );
};

export default CateFilterSearch;
